<template>
<div >
 <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :modal-append-to-body="false">
  <span>确定删除收藏夹？</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取消</el-button>
    <el-button type="primary" @click="deleteCard(0)">确定</el-button>
  </span>
</el-dialog>
  
  <el-row>
  <FloatImgBtn @FloatBtnClicked="addCard" @HistoryBtnClicked="dispHistory"/>
    <el-col :span="widthHist" :style="{'top':topHist+'px','position':'fixed'}">
      <p class="word-v-middle"><span>历史记录</span></p>
       <el-scrollbar :style="{'height': heightHist+'px'}" wrap-style="overflow-x: hidden;" :native="false">
      <draggable
        class="dragArea list-group"
        :list="history"
        :group="{ name: 'inCard', pull: 'clone', put: true }"
      >
        <div class="list-group-item" v-for="element in history" :key="element.url">{{ element.title }}</div>
      </draggable>
      </el-scrollbar>
    </el-col>
    <el-col :offset="widthHist" :span="24-widthHist" >
    <el-row id="collectCards" :gutter="20" class="row-bg" :justify="toCenter" type="flex">
      <draggable
		tag="div"
        	class="dragArea list-group"
        	:list="cards"
        	group="cards"
		handle=".header"
		style="flex-wrap: wrap;display: flex;flex-direction: row;justify-content: center;">
	<div v-for="card in cards" :key="card.id">
       	<dragCard :card="card" @close="deleteCard"/></div>
      </draggable>
      </el-row>
    </el-col>    
  </el-row>
 </div>
</template>

<script>
import draggable from "vuedraggable";
import dragCard from '@/components/dragCard'
import FloatImgBtn from '@/components/FloatImgBtn' 
export default {
  name:"collect",
  components: {
    draggable,
    dragCard,
    FloatImgBtn
  },
  data() {
    return {
      cards:this.$store.state.collectCards,
      history:this.$store.state.history,
      count: this.$store.state.count,
      widthHist: 0,
      heightHist:0,
      topHist:60,
      dialogVisible: false,
      confirmID:0,
      toCenter:"center",
      canCenter:true,
    };
  },

  methods: {
    log(evt) {
      console.log(evt);     
    },
    deleteCard(id) {
      if(id==0 && this.confirmID>0){
        const idx = this.cards.findIndex(e => e.id === this.confirmID);
        this.cards.splice(idx, 1);
        this.$store.commit('saveCollect',this.cards);
	this.dialogVisible=false;
	confirmID=0;
      }else{
        this.confirmID=id;
        this.dialogVisible=true;
      }
    },
    addCard(){
      this.count=this.count+1;
      console.log("addCard");
      this.cards.push({'id':this.count,'title':'未命名','content':[]});
      this.$store.commit('saveCollect',this.cards);
      this.$store.commit('saveCount',this.count);
    },
    dispHistory(){
      if(this.widthHist==0){this.widthHist=8;if(!this.canCenter){this.toCenter="none";}}
      else{this.widthHist=0;if(!this.canCenter){this.toCenter="center";}}
    }
  },
  mounted(){
    document.body.ondrop = function (event) {
        event.preventDefault();
        event.stopPropagation();
    };
    window.onunload = function(e) {
        this.$store.commit('clearHistory');
    };
  },
  created(){
   // console.log(this.$store.state.collectCards);
    this.heightHist=document.documentElement.clientHeight-150;
    console.log(this.heightHist);
    console.log(document.documentElement.clientWidth);
    if(document.documentElement.clientWidth*2/3<350){
        this.canCenter=false;
    }
  }
};
</script>
<style>

.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border: 0;
}

.list-group-item:first-child {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
  box-sizing: border-box;
}

.list-group-item {
  cursor: move;
}
.word-v-middle{
margin-bottom: 0;
font-size: 25px;
min-height: 50px;
display: flex;
align-items: center;
justify-content: center;
height: 31px;
margin-top: 5px;
color: #87878a;
white-space: normal;
}
.el-icon-circle-close {
  color: #c9a2a2;
  font-size: 20px;
  position: absolute;
  right: 50px;
}

.el-icon-circle-close:hover {
  color: #f40;
}
</style>